<template>
	<checkbox-group v-if="options.length">
		<label vertical v-for="(item,index) in options" :key="index" @click="handleTouch(item)">
			<checkbox
				:style="{width: size, height: size, borderRadius: radius}"
				:value="keyValue? item[valueName]: item"
				:checked="single?value==(keyValue? item[valueName]: item):(value.includes(keyValue? item[valueName]: item))"
				:disabled="item.disabled||disabled"
				
			/>
			<text>{{ keyValue?item[labelName]:item }}</text>
		</label>
	</checkbox-group>
	<checkbox
		v-else
		:style="{width: size, height: size, borderRadius: radius}"
		:value="value"
		:checked="value"
		:disabled="disabled"
		@click="handleSingleTouch"
	/>
</template>
<script>
	export default {
		props: {
			value: [
				Array, //复选框组时类型
				String, //单选框组时类型
				Number, //单选框组时类型
				Boolean, //单框时类型
			],
			disabled: Boolean,
			options: Array,
			
			single: Boolean,//单选框组模式
			
			// 当 keyValue为true时生效
			labelName: {
				type: String,
				default: 'label'
			},
			valueName: {
				type: String,
				default: 'value'
			},
			
			// 样式
			size:{
				type: String,
				default: '40rpx'
			},
			radius:{
				type: String,
				default: '10rpx'
			},
			vertical: Boolean
		},
		computed:{
			keyValue(){//选项是否键值对
				if(this.options[0]) return typeof this.options[0] == "object";
				else return false;
			}
		},
		data(){
			return {
				
			}
		},
		methods:{
			handleTouch(item){
				if(this.single){//单选模式
					let itemV = this.keyValue? item[this.valueName]: item;
					this.$emit('input', itemV)
				}
				else{
					let newV = [...this.value];
					let itemV = this.keyValue? item[this.valueName]: item;
					let index = newV.findIndex(e=>e == itemV);
					if(index==-1){
						newV.push(itemV)
					}
					else{
						newV.splice(index, 1)
					}
					this.$emit('input', newV)
				}
				
			},
			handleSingleTouch(){
				this.$emit('input', !this.value)
			}
		},
		options: {
			multipleSlots: true, //  在组件定义时的选项中启动多slot支持，默认启用
			styleIsolation: "isolated",  //  启动样式隔离。当使用页面自定义组件，希望父组件影响子组件样式时可能需要配置。具体配置选项参见：微信小程序自定义组件的样式
			addGlobalClass: true, //  表示页面样式将影响到自定义组件，但自定义组件中指定的样式不会影响页面。这个选项等价于设置 styleIsolation: apply-shared
			virtualHost: true,  //  将自定义节点设置成虚拟的，更加接近Vue组件的表现。我们不希望自定义组件的这个节点本身可以设置样式、响应 flex 布局等，而是希望自定义组件内部的第一层节点能够响应 flex 布局或者样式由自定义组件本身完全决定
		},
	}
</script>

<style lang="scss" scoped>
	label{
		display: inline-flex;
		align-items: center;
		&+label{
			margin-left: 20rpx;
		}
		
		text{
			display: inline-flex;
			margin-left: 10rpx;;
		}
	}
			
	
</style>